通过实战篇：预缓存可知，在安装阶段将资源进行缓存以便 Service Worker 变为可用后可直接从本地缓存中获取资源的能力，我们称之为预缓存。同时，我们已经对如何通过底层 API 来实现预缓存进行了详细说明，本章我们将学习如何使用 Workbox 来更高效地实现预缓存。

# 基本使用

Workbox 通过调用 workbox.precaching.precacheAndRoute 来实现预缓存，比如：

workbox.precaching.precacheAndRoute([
  '/styles/example.ac29.css',
  { url: '/index.html', revision: 'abcd1234' },
], {
  ignoreURLParametersMatching: [/^utm_/],
  directoryIndex: 'index.html',
  cleanUrls: true,
  urlManipulation: ({ url }) => {
    return [URLObject];
  }
});

workbox.precaching.precacheAndRoute 的参数依次为：

• entries：数组类型，用于设置需要缓存的资源列表，其中每一项为字符串或格式为 { url: string, revision: string } 的对象，使用规则为：如果名称中已包含资源的 hash 信息（即符合格式：[name].[hash].[ext]），则优先使用字符串，否则使用对象且必须指定 revision 属性的值，以便更好地处理资源的更新。
• options：对象类型，相关属性为：
  • ignoreURLParametersMatching：用于忽略请求中符合指定规则的查询参数，默认值为 [/^utm_/]，即忽略请求中以 utm_ 开头的请求参数（比如：/about.html?utm_campaign=abcd 将使用预缓存 /about.html 来进行响应）。
  • directoryIndex：默认值为 index.html，即以预缓存 /index.html 来响应 / 的请求
  • cleanUrls：当无法从预缓存中获得请求的响应时，是否为请求添加 .html 的后缀（比如：/about 将使用预缓存 /about.html 来进行响应），默认值为 true。
  • urlManipulation：有些时候，我们可能需要自行匹配请求所对应的预缓存对象，此时便可使用此选项。该选项接收一个格式为 { url: URL } 的对象，返回值为数组，且每一项的值为 URL 对象。

通过 workbox.precaching.precacheAndRoute 方法，我们无需处理 install、activate 及 fetch 事件便可为 Service Worker 添加预缓存处理能力，但如果我们对其所提供的默认更新机制（根据资源的 revision 值进行更新）或请求策略（缓存优先）不满意，可通过 workbox.precaching.PrecacheController 来自行处理 install、activate 及 fetch 事件，比如：

const precacheController = new workbox.precaching.PrecacheController();
precacheController.addToCacheList([
  '/styles/example.ac29.css',
  { url: '/index.html', revision: 'abcd1234' },
]);
self.addEventListener('install', (event) => {
  event.waitUntil(precacheController.install());
});
self.addEventListener('activate', (event) => {
  event.waitUntil(precacheController.activate());
});
self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.